<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>Login</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""
    />
    <script src="js/axios.min.js"></script>
    <script src="js/query.js"></script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- Font-Awesome-Icons-CSS -->
    <script>
        var roomId1;
        var roomId2;

        window.onload = function () {
            findAll(1);
        }

        function g() {
            $n("addDiv").style.visibility = "visible";
        }

        function g_2() {
            $n("addDiv").style.visibility = "hidden";
        }

        function g_3() {
            $n("findDiv").style.visibility = "hidden";
        }

        function g_4(id) {
            $n("findDiv").style.visibility = "visible";
            all(id);
        }

        function g_5() {
            $n("facDiv").style.visibility = "hidden";
        }

        function g_6(id) {
            $n("facDiv").style.visibility = "visible";
            facAll(id);
        }

        function findAll(num) {
            console.log(num);
            axios.get("room/findByItem", {
                params: {
                    address: $n("fangjiandizhi").value,
                    state: $n("fangjianzhuangtai").value,
                    type: $n("fangjianleixing").value,
                    live: $n("kezhufangjian").value
                }
            }).then(resp => {
                var info = resp.data;
                var str = "";
                console.log(info);
                info.records.forEach(n => {
                    str += `<tr><td>${n.address}</td><td>${n.content}</td><td>${n.inRoom}</td><td>${n.status}</td><td>${n.type}</td>
            <td><input type="button" value="删除" onclick="del(${n.id})"></td><td><input type="button" value="查看房间" onclick="g_4(${n.id})"></td><td><input type="button" value="查看设施" onclick="g_6(${n.id})"></td></tr>`;
                });
                $n("data").innerHTML = str;
                var custr = "";
                for (var i = 1; i <= info.totalPage; i++) {
                    custr += `<a href="javascript:findAll(${i})" style="color:blue;margin-left: 10px">${i}</a>`;
                }
                $n("cutDiv").innerHTML = custr;
            });
        }

        function del(id) {
            axios.get("room/del", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                if (info == "OK") {
                    alert("删除成功");
                    findAll(1);
                } else {
                    alert("还有学生，无法删除");
                }
            })
        }

        function all(id) {
            axios.get("room/findById", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                $n("address").value = info.address;
                $n("state").value = info.status;
                $n("type").value = info.type;
                $n("max").value = info.content;
                $n("stu").value = info.inRoom;

                var str = "";
                if (info.inRoom != 0) {
                    info.studentList.forEach(n => {
                        str += `<tr><td>${n.name}</td><td>${n.classObj.name}</td><td>${n.phone}</td>`;
                        $n("data2").innerHTML = str;
                    });
                } else {
                    str = "无";
                    $n("data2").innerHTML = str;
                }

            })
        }

        function facAll(id) {
            roomId2 = id;
            axios.get("roomSet/findById", {
                params: {
                    id: id
                }
            }).then(resp => {
                roomId1 = id;
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    str += `<tr><td>${n.info}</td><td>${n.reportDate}</td><td>${n.isSolve}</td>
<td><input type="button" value="处理设施" onclick="updateFac(${n.id})"></td>`;
                    $n("data3").innerHTML = str;
                });
            });
        }

        function facAdd() {
            if ($n("describe").value != "" && $n("describe").value != null && $n("describe").value != undefined) {
                axios.get("roomSet/add", {
                    params: {
                        info: $n("describe").value,
                        roomId: roomId1
                    }
                }).then(resp => {
                    alert("添加成功"),
                        facAll(roomId2),
                        findAll(1)
                });
                // g_5());
            } else {
                alert("请填写损坏信息");
                return
            }
        }

        function updateFac(id) {
            axios.get("roomSet/update", {
                params: {
                    roomSetId: id,
                    roomId: roomId1
                }
            }).then(resp => {
                alert("处理成功"),
                    facAll(roomId2),
                    findAll(1)
            });
        }

        function add() {
            axios.get("room/add", {
                params: {
                    address: $n("addresss").value,
                    content: $n("maxNum").value,
                    type: $n("grade").value
                }
            }).then(resp => {
                alert("添加成功"),
                    $n("addresss").value = "",
                    $n("maxNum").value = "",
                    $n("grade").value = "",
                    findAll(1),
                    g_2()
            });
        }

    </script>
</head>

<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>

<div style="margin-left: 200px;margin-top: 100px;background-color: white;width: 600px;height: 300px;text-align: center">
    <table style="width: 600px">
        <tr style="border: 5px solid black">
            <th>房间地址</th>
            <th>可容纳人数</th>
            <th>已住人数</th>
            <th>房间状态</th>
            <th>房间类型</th>
            <th>操作</th>
        </tr>
        <tr style="height: 30px ;width: auto"></tr>
        <tbody id="data" style="text-align: center;margin-top: 30px">

        </tbody>
    </table>
    <div id="cutDiv" style="background-color: white;position: absolute;left: 220px;top: 350px"></div>
    <div style="width: 250px;height: 250px;background-color: white; position: absolute;right: 0;bottom: 0;border: 2px solid black;text-align: center">
        <h3 style="margin-bottom: 30px">查询房间信息</h3>
        <div style="text-align: left;margin-bottom: 30px;margin-left: 10px">
            房间地址：<input type="text" id="fangjiandizhi" value=""><br>
            可住房间：<select id="kezhufangjian">
            <option value="">不限</option>
            <option value=" ">可住</option>
        </select><br>
            房间状态：<select id="fangjianzhuangtai">
            <option value="">不限</option>
            <option value="正常">正常</option>
            <option value="损坏">损坏</option>
        </select><br>
            房间类型：<select id="fangjianleixing">
            <option value="">不限</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select><br>
        </div>
        <input type="button" value="查询" onclick="findAll(1)">
    </div>
</div>


<div style="text-align: center;width:700px">
    <input type="button" value="添加房间" onclick="g()">
</div>
<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="addDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        房间地址：<input type="text" id="addresss"><br>
        容纳人数：<input type="text" id="maxNum"><br>
        房间类型：<select id="grade">
        <option>男</option>
        <option>女</option>
    </select><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="返回" onclick="g_2()">
    </div>
</div>

<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="findDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 20px;
            background-color: white;">
        房间地址：<input type="text" id="address" value="" disabled><br>
        房间状态：<input type="text" id="state" value="" disabled><br>
        房间类型：<input type="text" id="type" value="" disabled><br>
        可容纳人数：<input type="text" id="max" value="" disabled><br>
        已住人数：<input type="text" id="stu" readonly value="" disabled><br>
        <table style="width: 300px">
            <tr style="border: 5px solid black">
                <th>学生姓名</th>
                <th>所在班级</th>
                <th>联系电话</th>
            </tr>
            <tr style="height: 30px ;width: auto"></tr>
            <tbody id="data2" style="text-align: center;margin-top: 30px">

            </tbody>
        </table>
        <input type="button" value="返回" onclick="g_3()">
    </div>
</div>

<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="facDiv">
    <div style=" border: 3px solid #000;
            width: 600px;
            height: 300px;
            padding: 20px;
            background-color: white;">
        <table style="width: 600px">
            <tr style="border: 5px solid black">
                <th>损坏描述</th>
                <th>报损日期</th>
                <th>是否解决</th>
                <th>处理设施</th>
            </tr>
            <tr style="height: 30px ;width: auto"></tr>
            <tbody id="data3" style="text-align: center;margin-top: 30px">

            </tbody>
        </table>
        <input type="text" id="describe"><br>
        <input type="button" value="添加损坏记录" onclick="facAdd()">
        <input type="button" value="退出" onclick="g_5()">
    </div>
</div>
<!-- //content -->

<!-- Jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- //Jquery -->

<!-- effect js -->
<script src="js/canva_moving_effect.js"></script>
<!-- //effect js -->
</html>